<template>
    <div class="bigbox" v-if="obj">
        <a-tabs default-active-key="1">
            <a-tab-pane key="1" tab="课程描述" class="courseDescription" v-html="obj.courseDetail">

            </a-tab-pane>
            <a-tab-pane key="2" tab="目录" force-render>
                <list :list="obj.sections" v-if="obj"></list>
            </a-tab-pane>
            <a-tab-pane key="3" tab="评论">
                <comment :courseId="courseId"></comment>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>
<script>
    import list from "./list.vue";
    import comment from "./comment.vue";
    export default {
        components:{
            list,
            comment
        },
        props:{
            courseId:{
                type:Number,
                default:121
            }
        },
        data() {
            return {
                obj:null
            };
        },

        created(){
            this.$axios.get(`http://59.111.104.104:8086/pc/course/detail/${this.courseId}`).then(res=>{
                this.obj=res.data.data
            });
        },
    };
</script>
<style lang="less" scoped>
    .bigbox{
        background-color: white;
        text-align: left;
        padding: 20px;
    }
     /deep/p{
        margin-left: 10px;
    }
    /deep/.ant-tabs-nav .ant-tabs-tab-active {
        color: #00CF8C;
        font-weight: 500;
    }
    /deep/.ant-tabs-ink-bar{
        background-color: #00CF8C;
    }
    .courseDescription{
        padding: 15px;
    }
</style>
